<!-- 
 This is a demo for using chart-js, 
 you can visit my site for more demos if you needed :-)
 
 Author: TianJingrong(work_id_tjr@163.com)
 Article: https://www.yii2demo.com
 Source: http://www.chartjs.org/ 
-->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>运营统计</title>
        <link rel="stylesheet" href="css\zui.css">
        <link href="lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
        <script src="Userjs/Chart.js"></script>
        <style>
            .line-legend {
              list-style: none;
              padding: 0px;
            }
            .line-legend li {
              display: block;
              padding-left: 30px;
              position: relative;
              margin-bottom: 4px;
              border-radius: 5px;
              padding: 2px 8px 2px 28px;
              font-size: 14px;
              cursor: default;
              -webkit-transition: background-color 200ms ease-in-out;
              -moz-transition: background-color 200ms ease-in-out;
              -o-transition: background-color 200ms ease-in-out;
              transition: background-color 200ms ease-in-out;
            }
            .line-legend li:hover {
              background-color: #fafafa;
            }
            /**
             * Start by hiding the checkboxes
             */
            .checkbox-five>input[type=checkbox] {
              visibility: hidden;
            }

            /**
             * Create the box for the checkbox
             */
            .checkbox-five label {
              cursor: pointer;
              position: absolute;
              width: 25px;
              height: 25px;
              top: 0;
              left: 0;
              border:1px solid #ddd;
            }
            /**
             * Display the tick inside the checkbox
             */
            .checkbox-five label:after {
              opacity: 0.2;
              content: '';
              position: absolute;
              width: 9px;
              height: 5px;
              background: transparent;
              top: 8px;
              left: 7px;
              border: 3px solid #333;
              border-top: none;
              border-right: none;
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
              -o-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
            }
            /**
             * Create the hover event of the tick
             */
            .checkbox-five label:hover::after {
              opacity: 0.5;
            }
            /**
             * Create the checkbox state for the tick
             */
            .checkbox-five input[type=checkbox]:checked + label:after {
              opacity: 1;
            }
        </style>
    </head>
    <body>
    <div class="input-group">
        <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
            <input type="search" class="form-control search-input" placeholder="请输入年份" id="searchtext">
            <label for="searchtext" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        </div>
        <span class="input-group-btn">
                      <button class="btn btn-primary" type="button" onclick="ccjyear()">搜索</button>
                    </span>
    </div>
        <div style="width:50%">
            <div id="line-legend">
            </div>
            <div>
                <canvas id="line-chart" height="450px" width="800px"></canvas>
            </div>
        </div>

        <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/zui.min.js"></script>
    <script src="js/zui.min.js"></script>
    <script src="lib/datetimepicker/datetimepicker.min.js"></script>
    <script src="Userjs/RunCount.js"></script>
    </body>
</html>

